<template>
  <div class="Material-right">

    <div class="isscroll" v-show="!showImport">
      <div class="send-header">
        <img v-show="userInfo.avatarUrl" :src="userInfo.avatarUrl"/>
        <img v-show="!userInfo.avatarUrl" src="../../assets/images/1.png"/>
        <div class="header-detail">
          <p class="header-detail_title">{{userInfo.nickname}}的文章</p>
          <div class="header-detail_tag">
            <span>累计文章: {{userStats.articleTotal}}</span>
            <span>共计字数: {{userStats.wordTotal}}</span>
            <span>累计浏览: {{userStats.readTotal}}</span>
          </div>
        </div>
        <button class="save-btn-two" @click="handleImportClick">导入文章</button>
      </div>

      <!--最新编辑-->

      <!--刘一丁新增 无内容提示-->
      <div class="nocontent-tips" v-show="listIsNull">
        <img src="../../assets/images/no-default.png"/>
        <p>啧啧，您还未发布任何文章！</p>
      </div>

      <div class="new-edit">
        <div class="new-edit_text" v-for="item in artList">
          <div class="pic">
            <img v-show="item.coverUrl" :src="item.coverUrl"/>
            <img v-show="!item.coverUrl" src="../../assets/images/default2.png"/>
          </div>
          <div class="info">
            <div class="title">
              <div class="tools">
							<span>
								<svg class="icon" aria-hidden="true">
								  	<use xlink:href="#icon-eye"></use>
								</svg>
								{{item.readCount}}
							</span>
                <span>
								<svg class="icon" aria-hidden="true">
								  	<use xlink:href="#icon-message"></use>
								</svg>
								{{item.commentCount}}
							</span>
                <span>
								<svg class="icon" aria-hidden="true">
								  	<use xlink:href="#icon-share-"></use>
								</svg>
								{{item.shareCount}}
							</span>
              </div>
              <h3>{{item.title}}</h3>
            </div>
            <p class="text">{{item.origContent}}</p>
            <div class="detail">
              发布时间: <span class="time" v-time:time="item.publishTime">{{item.publishTime}}</span>
              <span class="form">已发布到：
                <img src="../../assets/images/icon80-vf.png"/>
							<img v-show="item.isPublishWx" src="../../assets/images/1.png"/>
							<img v-show="item.isPublishWb" src="../../assets/images/2.png"/>
							<img v-show="item.isPublishTt" src="../../assets/images/3.png"/>
						</span>
              <!--<button class="cancel-btn" @click="goToArt(item.articleId)">编辑文章</button>-->
            </div>
          </div>
        </div>
        <div class="more-article" v-show="loadMore">
          <button class="cancel-btn" @click="lodeMoreArt">载入更多文章</button>
        </div>

      </div>


    </div>

    <ImportArticle v-show="showImport" @clickHidden="hiddenImport"></ImportArticle>
  </div>

</template>

<script>
  import util from '../../lib/util'
  import ImportArticle from './ImportArticle.vue'

  export default {
    name: 'ReleaseManage',
    components: {ImportArticle},
    data() {
      return {
        artList: [],
        loadMore: false,
        pageNo: 1,
        showImport: false,
        userStats: {},
        userInfo: {},
        listIsNull: false
      }

    },
    created() {

      this.ajaxGetUser();
      this.ajaxArtList(this.pageNo);
      this.ajaxUser();

    },
    methods: {
      //获取用户数据统计
      ajaxUser: function () {
        let that=this;
        util.ajax.get('article/getStatisData').then((res) => {

          that.userStats = res.data || {};
          for(let p in that.userStats){
            if(that.userStats.hasOwnProperty(p)){
              that.userStats[p]=parseInt(that.userStats[p]);
            }
          }

        })
      },
      //获取用户信息
      ajaxGetUser: function () {

        util.ajax.get('getUserInfo').then((res) => {

          this.userInfo = res.data || {};

        })
      },
      handleImportClick() {

        this.showImport = true;

      },
      hiddenImport: function () {
        this.showImport = false;
      },
      // 加载更多
      lodeMoreArt: function () {

        this.ajaxArtList(this.pageNo);
      },
      goToArt: function (id) {
        this.$router.push({name: 'Article', params: {artId: id}});
      },
      // 获取已发布文章列表
      ajaxArtList: function (pageNo) {

        util.ajax.post('article/list', {
          'pageNo': pageNo, 'pageSize': 10, 'folderId': 0, 'isPublish': 1
        }).then((res) => {


          if (res.data) {

            if (!res.data.list.length) {
              this.listIsNull = true;
            }

            if (res.data.list.length >= 10) {

              this.loadMore = true;
              this.pageNo = this.pageNo + 1;

            } else {

              this.loadMore = false;

            }
            this.artList = res.data ? this.artList.concat(res.data.list) : this.artList.concat([]);
          }


        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .Material-right {
    display: flex !important;
    /*flex-direction: column;*/
    position: absolute;
    top: 83px;
    left: 220px;
    right: 0px;
    bottom: 0px;
    padding: 0px 20px;
    /*overflow: hidden;*/
    /*头部*/
    .send-header {
      height: 140px;
      border-bottom: 1px solid #ddd;
      img {
        float: left;
        margin: 20px 21px 0px 0px;
        width: 100px;
        height: 100px;
        vertical-align: middle;
        border-radius: 50%;
      }
      .header-detail {
        float: left;
        margin: 40px 0px 40px 0px;
        .header-detail_title {
          font-size: $fs20;
          color: $listTitleColor;
          line-height: 40px;
        }
        .header-detail_tag {
          font-size: $fs14;
          color: $listTitleColor;
          line-height: 20px;
          span {
            margin-right: 35px;
          }
        }
      }
      .save-btn-two {
        float: right;
        margin: 50px 19px 0px 0px;
        width: 120px;
      }
    }

    .isscroll {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    /*文章列表*/
    .new-edit {
      flex: 1 !important;
      padding-bottom: 50px;
      overflow-y: scroll;
      background: $colorWhite;
      @root-at .area-title {
        font-size: 16px;
        color: $listTitleColor;
        line-height: 30px;
      }
      .new-edit_text {
        position: relative;
        padding: 20px 0px;
        border-bottom: 1px solid #ddd;
        .pic {
          overflow: hidden;
          float: left;
          width: 160px;
          height: 100px;
          margin-right: 20px;
          img {
            width: 100%;
          }
        }
        .info {
          overflow: hidden;
          .title {
            font-size: 18px;
            color: $listTitleColor;
            line-height: 30px;
            font-weight: normal;
            .tools {
              float: right;
              margin-right: 36px;
              font-size: $fs12;
              color: $listTitleColor;
              line-height: 30px;
              span {
                margin-left: 40px;
              }
            }
          }
          .text {
            font-size: 14px;
            color: $vfConcentColor;
            line-height: 20px;
            height: 40px;
            margin-top: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          .detail {
            font-size: 12px;
            color: $listTitleColor;
            line-height: 20px;
            margin-top: 8px;
            span {
              margin-right: 60px;
              img {
                width: 20px;
                height: 20px;
              }
            }
            button {
              display: none;
              position: absolute;
              right: 10px;
              bottom: 14px;
              margin-right: 10px;
              width: 100px;
              height: 30px;
              line-height: 30px;
              font-size: $fs14;
            }
          }
        }
        &:hover {
          background: $listBgColor;
          button {
            display: block !important;
          }
        }
      }
    }
    .more-article {
      margin: 20px 0px 65px;
      text-align: center;
      button {
        width: 180px;
      }
    }
  }
</style>
